<template>
  <div class="biz-container">
    <table-layout :isHome="true">
      <template #home>
        <div class="pbox">
          <div id="htop" class="pbox1">
            <div class="box">
              <i class="icon icon1"></i>
              <div>
                <span class="gray">待确认订单</span>
                <p><span>2</span>个</p>
              </div>
            </div>
            <div class="box"> 
              <i class="icon icon2"></i>
              <div>
                <span class="gray">配送中订单</span>
                <p><span>2</span>个</p>
              </div>           
            </div>
            <div class="box">
              <i class="icon icon3"></i>
              <div> 
                <span class="gray">待收货订单</span>
                <p><span>2</span>个</p>
              </div>           
            </div>
            <div class="box">
              <i class="icon icon4"></i>
              <div>           
                <span class="gray">待结算订单</span>
                <p><span>2</span>个</p>
              </div>           
            </div>
            <div class="box">
              <i class="icon icon5"></i>
              <div>        
                <span class="gray">证照过期提醒</span>
                <p><span>30</span>个</p>
              </div> 
            </div>
          </div>
          <div id="htable" class="pbox2" >
            <!-- :style="{ height: htable + 'px' }" -->
            <h3>销售订单</h3>
            <a-list-table
              :columns="columns"
              :tableData="listdata"
              :pagination="pagination"
              :loading="loading"
              :scroll="{ y: htable }"
              @onTableChange="handleTableChange"
            >
            </a-list-table> 
          </div>
        </div>
      </template>
    </table-layout>
  </div>
</template>

<script>
// @ is an alias to /src
import tableLayout from '@/views/app/biz/common/index'
import aListTable from '@/views/app/biz/common/aListTable'
import { getByConditions, getByConditionsCount } from '@/views/app/biz/saleOrder/saleOrder'
const columns = [
  { title: '销售单号', dataIndex: 'saleOrderNo', key: 'saleOrderNo', align: 'center' }, 
  { title: '销售单名称', dataIndex: 'saleOrderName', key: 'saleOrderName', align: 'center' },
  { title: '采购类型', dataIndex: 'saletype', key: 'saletype', align: 'center' },
  { title: '客户名称', dataIndex: 'customerName', key: 'customerName', align: 'center' },
  { title: '含税总价(元)', dataIndex: 'totalPrice', key: 'totalPrice', align: 'center',scopedSlots: { customRender: 'tofixed2' } },
  { title: '送货类型', dataIndex: 'deliveryType', key: 'deliveryType', align: 'center' },
  { title: '应收金额(元)', dataIndex: 'receivableAmount', key: 'receivableAmount', align: 'center' },
  { title: '税费(元)', dataIndex: 'taxes', key: 'taxes', align: 'center' },
  { title: '已收金额(元)', dataIndex: '	paidAmount', key: '	paidAmount', align: 'center' },
  { title: '配送状态', dataIndex: 'deliveryState', key: 'deliveryState', align: 'center', },
  { title: '开票状态', dataIndex: 'invoiceState', key: 'invoiceState', align: 'center', },
  { title: '订单状态', dataIndex: 'saleOrderState', key: 'saleOrderState', align: 'center', },
  // { title: '销售单生成时间', dataIndex: 'saleOrderCreateTime', key: 'saleOrderCreateTime', align: 'center' },
  // { title: '销售单确认时间', dataIndex: 'saleOrderCfmTime', key: 'saleOrderCfmTime', align: 'center' },
  // { title: '销售单完成时间', dataIndex: 'saleOrderFinTime', key: 'saleOrderFinTime', align: 'center' },
  // { title: '采购单位备注', dataIndex: 'remarks', key: 'remarks', align: 'center' },
  // {
  //   title: '操作',
  //   dataIndex: 'action',
  //   key: 'operation',
  //   width: 180,
  //   align: 'center',
  //   scopedSlots: { customRender: 'action' },
  // },
]
// let links=['zhuCezh','pinMing','gongYinsmc']
export default {
  name: 'Home',
  components: {
    tableLayout,
    aListTable,
  },
  data () {
    return {
      navData: [
        { title: '待确认订单', icon: '', num: '2', link: '' }
      ],
      columns: columns,
      listdata: [],
      loading: false,
      pagination: {
        //分页配置
        current: 1, //当前页码 current
        pageSize: 10, //每页显示条数 pageSize
        total: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['2', '10', '50', '100'],
      },
      //table高度
      htable: 0,
      q_formDatas: {},
      data: {
        code: 'C1',
        data: {
          code: 'C1',
        },
      },
    }
  },
  mounted () {
    this.getTotal()
    this.getList(this.q_formDatas)
    this.getHeight()

  },

  methods: {
    getHeight () {
      let hbox2 = document.documentElement.clientHeight - 115 - 260
      this.htable = hbox2
    },
    // 触发改变页码,筛选,排序时的回调
    handleTableChange (pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getList(this.q_formDatas)
    },
    // 初始化页面时得到总数
    async getTotal () {
      let pages = ''
      pages = await getByConditionsCount(this.q_formDatas)
      // console.log(pages)
      if (pages && pages.code && pages.code === 'C1') {
        const pagination = { ...this.pagination }
        pagination.total = pages.data
        this.pagination = pagination
        this.pagination.showTotal = (showTotal) => {
          return `共 ${showTotal} 条`
        }
      }
    },
    // 初始化查询时的数据列表
    async getList (params) {
      // console.log('请求列表时传入的数据', params)
      let actionBtn = ['订单明细']
      this.loading = true
      let listdata = []
      let res = ''
      res = await getByConditions(params, this.pagination)
      this.loading = false
      // console.log(res)
      if (res && res.code && res.code === 'C1' && res.data) {
        const resdata = res.data
        for (let item of resdata) {
          switch (item.saleOrderState) {
            case '已确认':
              actionBtn = ['订单明细']
              break
            case '已拒绝':
              actionBtn = ['订单明细']
              break
            default:
              actionBtn = ['确认', '订单明细']
          }
          listdata.push({
            key: item.pid,
            action: actionBtn,
            ...item,
            totalPrice: item.totalPrice.toFixed(2)
          })
        }
        this.listdata = listdata
      } else {
        this.listdata = []
      }
      // console.log(this.listdata)
    },
  },
}
</script>

<style scoped>
/* .home {
    width: 900px;
    margin: 0 auto;
    padding: 25px 0; 
  }
  .home > .banner {
    text-align: center;
    padding: 25px 0;
    margin: 25px 0;
  } */
.pbox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pbox1 {
  height: 200px;
  display: flex;
}
.pbox2 {
  /* margin-top: 20px; */
  flex: 1;
  overflow-y: scroll;
}
#htop {
  padding: 1% 1% 1% 1%;
  box-sizing: border-box;
  display: flex;
}
.gray {
  color: #828282;
}
#htop .box {
  flex: 1;
  background-color: rgb(255, 255, 255);
  margin-right: 2.5%;
  /* padding: 1% 2% 2% 1%; */
  box-sizing: border-box;
  /* text-align: center; */
  box-shadow: 0px 5px 5px #b6b6b6;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#htop .box:last-child {
  margin-right: 0;
  box-sizing: border-box;
}
#htop .box p {
  text-align: center;
}
#htop .box p span {
  font-size: 24px;
}

#htop .box span {
  text-align: center;
  margin: 0 0 0 3px;
}
.icon {
  display: block;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  /* margin-top:20px; */
  flex-shrink: 0;
}
.icon1 {
  background-image: url('~@/assets/dcheck.png');
}
.icon2 {
  background-image: url('~@/assets/send.png');
}
.icon3 {
  background-image: url('~@/assets/dshouh.png');
}
.icon4 {
  background-image: url('~@/assets/djies.png');
}
.icon5 {
  background-image: url('~@/assets/guoqi.png');
}
#htable {
  overflow-y: scroll;
  background: #fff;
  /* box-shadow: 0px 5px 5px #b6b6b6; */
}
#htable h3 {
  padding: 10px 0 5px 15px;
  box-sizing: border-box;
  display: block;
  background: #4cb1ff;
  color: #fff;
}
</style>
